<template>
  <div class="sjfx">
    <tabbar></tabbar>

    <!-- 页面标题 -->
    <div class="pageTitle">
      <p>空气质量数据分析</p>
      <p>
        <img src="@/assets/sthj/img/book.png" alt="" />
        <span>空气质量报告</span>
      </p>
    </div>

    <!-- 头部展示卫星图 -->

    <div class="header">
      <img src="@/assets/sthj/img/yzb.png" alt="" class="yzb" />
      <div class="wxt">
        <!-- 高德地图 -->
        <div class="dt">
          <el-amap
            :vid="'amapDemo'"
            :center="center"
            :zoom="zoom"
            :plugin="plugin"
            :amap-manager="amapManager"
          >
            <el-amap-marker
              v-for="(item, index) in dian"
              :key="index"
              :position="item.jw"
              :events="item.events"
              :icon="dianIcon"
            />
            <!-- 多边形 -->
            <el-amap-polygon
              strokeColor="#0050E7"
              strokeWeight="5"
              strokeOpacity="1"
              fillColor="#c9ebf7"
              fillOpacity="0.2"
              ref="map"
              v-for="(polygon, index) in polygons"
              :key="index"
              :path="polygon.Ce.path"
            />
            <!-- 信息窗体 -->
            <el-amap-info-window
              v-if="window"
              :position="window.jw"
              :visible="window.visible"
              :offset="window.offset"
              :close-when-click-map="true"
              :is-custom="true"
            >
              <div class="sy-widow col999">
                空气质量：{{
                  window.type == 0
                    ? "优"
                    : window.type == 1
                    ? "良"
                    : window.type == 2
                    ? "差"
                    : ""
                }}
              </div>
            </el-amap-info-window>
          </el-amap>
        </div>

        <img src="@/assets/sthj/img/bzd.png" class="bzd" />
        <div class="situationList">
          <p>空气质量指数</p>
          <p><span style="background: #e84b30"></span>>优</p>
          <p><span style="background: #edc24b"></span>良</p>
          <p><span style="background: #00e584"></span>轻度污染</p>
          <p><span style="background: #e84b30"></span>中度污染</p>
          <p><span style="background: #edc24b"></span>重度污染</p>
          <p><span style="background: #00e584"></span> 严重污染</p>
          <p style="margin-top: 43px">
            <img src="@/assets/sthj/img/green.png" alt="" />监测点
          </p>
        </div>
      </div>

      <img src="@/assets/sthj/img/yzb.png" alt="" class="yzb" />
    </div>

    <!-- echart空气质量图表展示 -->
    <div class="airQuality">
      <!-- 空气质量变化趋势折线图 -->
      <div class="trend" style="width: 65%">
        <div class="trendTitle title">
          <p>空气质量变化趋势</p>
          <div>
            <el-select
              v-model="trendValue"
              placeholder="请选择"
              @change="selectedTrend"
            >
              <el-option
                v-for="item in trendOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="content" id="trendContent"></div>
      </div>
      <div class="current" style="width: 35%">
        <div class="currentTitle title"><p>当前空气质量</p></div>
        <div class="content" id="currentContent"></div>
      </div>
    </div>

    <!-- aqi预报 -->
    <div class="forecast">
      <div class="forecast-title">南雄市AQI预报</div>
      <div class="forecast-content">
        <div
          class="forecast-content-item"
          v-for="(item, index) in aqiList"
          :key="index"
        >
          <div
            class="forecast-box"
            :style="
              item.state == '优'
                ? 'background:#39C50B'
                : item.state == '良'
                ? 'background:#0BC588'
                : item.state == '差'
                ? 'background:#A6C50B'
                : ''
            "
          >
            <p>
              <span>{{ item.min }}</span
              >~<span>{{ item.max }}</span>
            </p>
            <p>{{ item.state }}</p>
          </div>
          <p
            class="Sharp"
            :style="
              item.state == '优'
                ? 'background:#39C50B'
                : item.state == '良'
                ? 'background:#0BC588'
                : item.state == '差'
                ? 'background:#A6C50B'
                : ''
            "
          ></p>
          <p class="forecast-date">{{ item.timer }}</p>
        </div>
      </div>
    </div>

    <!-- 实时空气质量表格 -->
    <div class="realQuality">
      <div class="title">
        <p>实时空气质量</p>
        <div>
          <el-select
            v-model="realValue"
            placeholder="请选择"
            @change="selectedChange"
          >
            <el-option
              v-for="item in realOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="content">
        <el-table
          :data="tableData"
          style="width: 100%"
          v-loading="tableLoading"
        >
          <el-table-column fixed="left" prop="town" label="城镇" width="150">
          </el-table-column>
          <el-table-column prop="AQI" label="AQI" width="120">
          </el-table-column>

          <el-table-column
            prop="firstContaminants"
            label="首要污染物"
            width="120"
          >
          </el-table-column>

          <el-table-column
            prop="secondContaminants"
            label="次要污染物"
            width="120"
          >
          </el-table-column>

          <el-table-column prop="MeasurementTime" label="测量时间" width="120">
          </el-table-column>

          <el-table-column
            fixed="right"
            prop="airQuality"
            label="空气质量"
            width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.airQuality }}
              <span
                class="levelblock"
                :style="{
                  background:
                    scope.row.airQuality == '优'
                      ? '#00E500'
                      : scope.row.airQuality == '良'
                      ? '#0BC588'
                      : scope.row.airQuality == '差'
                      ? '#A6C50B'
                      : '',
                }"
              >
              </span>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage2"
            :page-sizes="[100, 200, 300, 400]"
            layout="prev, pager, next,sizes"
            :total="1000"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>



import Footer from "../../../components/sthj/footer.vue";
import tabbar from "../../../components/sthj/tabbar.vue";
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager(); //
export default {
  components: { tabbar, Footer },

  name: "HcdcpSthj",

  data() {
    return {  
    
      selectIndex: 0,
      //获取新闻的范围

      //报告
      reportList: [
        {
          title: "生态环境质量报告",
          imgurl: require("../../../assets/sthj/img/1.png"),
          iconurl: require("../../../assets/sthj/img/lh.png"),
          path: "",
        },
        {
          title: "空气质量报告",
          imgurl: require("../../../assets/sthj/img/2.png"),
          iconurl: require("../../../assets/sthj/img/yz.png"),
          path: "",
        },
        {
          title: "水环境质量报告",
          imgurl: require("../../../assets/sthj/img/3.png"),
          iconurl: require("../../../assets/sthj/img/huo.png"),
          path: "",
        },
        {
          title: "土地环境质量报告",
          imgurl: require("../../../assets/sthj/img/4.png"),
          iconurl: require("../../../assets/sthj/img/shu.png"),
          path: "",
        },
      ],

      //空气质量变化趋势下拉
      trendOptions: [
        {
          value: "近一周",
          label: "近一周",
        },
        {
          value: "近两周",
          label: "近两周",
        },
        {
          value: "近三周",
          label: "近三周",
        },
        {
          value: "近一个月",
          label: "近一个月",
        },
        {
          value: "近半年",
          label: "近半年",
        },
      ],
      trendValue: "近一周",
      TrendChart: null, //空气变化趋势图表对象
      TrendOption: {
        xAxis: {
          type: "category",
          boundaryGap: false,
          splitLine: {
            show: true,
          },
          data: ["7/12", "8/12", "9/12", "10/12", "11/12", "12/12", "1/12"],
        },
        grid: {
          show: true,
          height: "80%",
          bottom: "30",
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter:
            '{b0}日空气质量为&nbsp;:&nbsp;<span style="font-size:18px;color:#2D99FF;">{c0}</span>',
        },
        series: [
          {
            data: [0, 132, 101, 134, 140, 160, 160],
            type: "line",
            lineStyle: {
              opacity: 0,
            },
            itemStyle: {
              opacity: 0,
            },
            smooth: true,
            areaStyle: {
              color: "#2D99FF",
            },
          },
        ],
      },

      //实时空气质量下拉框
      realOptions: [
        {
          value: "2020-09-09",
          label: "2020-09-09",
        },
        {
          value: "2020-09-10",
          label: "2020-09-11",
        },
        {
          value: "2020-09-12",
          label: "2020-09-12",
        },
        {
          value: "2020-09-13",
          label: "2020-09-13",
        },
        {
          value: "2020-09-14",
          label: "2020-09-14",
        },
      ],
      realValue: "2020-09-09",

      //AQI预报数据
      aqiList: [
        {
          min: 35,
          max: 40,
          timer: "2021-09-07",
          state: "差",
        },
        {
          min: 55,
          max: 65,
          timer: "2021-09-07",
          state: "优",
        },
        {
          min: 40,
          max: 50,
          timer: "2021-09-07",
          state: "良",
        },
        {
          min: 35,
          max: 65,
          timer: "2021-09-07",
          state: "优",
        },
        {
          min: 35,
          max: 65,
          timer: "2021-09-07",
          state: "优",
        },
      ],

      //实时空气质量表格数据
      tableData: [
        {
          town: "雄州街道",
          AQI: "45",
          firstContaminants: "PM2.5",
          secondContaminants: "PM10",
          MeasurementTime: "09:30",
          airQuality: "优",
        },
        {
          town: "雄州街道",
          AQI: "34",
          firstContaminants: "PM10",
          secondContaminants: "PM2.5",
          MeasurementTime: "10:30",
          airQuality: "良",
        },
        {
          town: "雄州街道",
          AQI: "45",
          firstContaminants: "PM10",
          secondContaminants: "PM2.5",
          MeasurementTime: "11:30",
          airQuality: "良",
        },
        {
          town: "雄州街道",
          AQI: "66",
          firstContaminants: "PM10",
          secondContaminants: "PM10",
          MeasurementTime: "12:30",
          airQuality: "差",
        },
        {
          town: "雄州街道",
          AQI: "47",
          firstContaminants: "PM2.5",
          secondContaminants: "PM10",
          MeasurementTime: "13:30",
          airQuality: "良",
        },
        {
          town: "雄州街道",
          AQI: "54",
          firstContaminants: "PM10",
          secondContaminants: "PM10",
          MeasurementTime: "14:30",
          airQuality: "优",
        },
        {
          town: "雄州街道",
          AQI: "40",
          firstContaminants: "PM2.5",
          secondContaminants: "PM10",
          MeasurementTime: "15:30",
          airQuality: "差",
        },
        {
          town: "雄州街道",
          AQI: "35",
          firstContaminants: "PM10",
          secondContaminants: "PM10",
          MeasurementTime: "16:30",
          airQuality: "良",
        },
        {
          town: "雄州街道",
          AQI: "70",
          firstContaminants: "PM10",
          secondContaminants: "PM2.5",
          MeasurementTime: "17:30",
          airQuality: "优",
        },
        {
          town: "雄州街道",
          AQI: "60",
          firstContaminants: "PM10",
          secondContaminants: "PM10",
          MeasurementTime: "18:30",
          airQuality: "优",
        },
      ],
      tableLoading: false,
      timer: null,

      // 高德
      amapManager,
      zoom: 10,
      center: [114.364022, 25.190073],
      plugin: [
        {
          pName: "MapType",
          defaultType: 1,
        },
      ],
      // 画行政区
      district: null,
      polygons: [],
      dian: [],
      dianIcon: require("../../../assets/sthj/img/icon.png"),
      // 信息窗体
      windows: [],
      window: {
        type: 0, //0 优 1良 2差
        jw: [114.098741, 25.243776],
        offset: [20, -30],
        visible: true,
      },

      // 经纬度
      one: [
        [113.970006, 25.165228],
        [114.001181, 25.134034],
        [114.00592, 25.130498],
        [114.005338, 25.125486],
        [114.007451, 25.124068],
        [114.014515, 25.125069],
        [114.024055, 25.133029],
        [114.03758, 25.145866],
        [114.048634, 25.149177],
        [114.060375, 25.148447],
        [114.076649, 25.15037],
        [114.098245, 25.141727],
        [114.109729, 25.147738],
        [114.13073, 25.163289],
        [114.137312, 25.180703],
        [114.141549, 25.185079],
        [114.161578, 25.195357],
        [114.1764, 25.196457],
        [114.189848, 25.201907],
        [114.215035, 25.203254],
        [114.215284, 25.207811],
        [114.197844, 25.227175],
        [114.200223, 25.246105],
        [114.19299, 25.249507],
        [114.175777, 25.250101],
        [114.159203, 25.254393],
        [114.148028, 25.266703],
        [114.133917, 25.262137],
        [114.126295, 25.263561],
        [114.124785, 25.272618],
        [114.108056, 25.271609],
        [114.043262, 25.244207],
        [114.037957, 25.244673],
        [114.018403, 25.25197],
        [114.010601, 25.252203],
        [113.99782, 25.24312],
        [113.992788, 25.239937],
        [113.9881, 25.238928],
        [113.989618, 25.221342],
        [113.983583, 25.205617],
        [113.970853, 25.187715],
        [113.96911, 25.176647],
      ],
      two: [
        [114.34614, 25.097779],
        [114.354095, 25.105416],
        [114.357243, 25.114917],
        [114.358046, 25.134539],
        [114.367002, 25.145271],
        [114.371151, 25.157246],
        [114.376016, 25.182434],
        [114.366461, 25.202025],
        [114.347293, 25.221614],
        [114.292595, 25.227282],
        [114.271384, 25.218586],
        [114.244499, 25.217227],
        [114.233408, 25.203443],
        [114.223241, 25.192958],
        [114.218013, 25.19125],
        [114.214159, 25.198162],
        [114.210991, 25.198239],
        [114.207652, 25.194007],
        [114.203236, 25.185832],
        [114.195043, 25.178278],
        [114.19335, 25.171821],
        [114.184103, 25.166296],
        [114.170417, 25.163325],
        [114.160898, 25.161732],
        [114.156682, 25.159596],
        [114.155689, 25.157051],
        [114.15916, 25.153264],
        [114.176917, 25.144135],
        [114.205364, 25.143766],
        [114.218215, 25.119026],
        [114.21022, 25.073074],
        [114.212918, 25.071862],
        [114.225425, 25.073899],
        [114.22979, 25.070253],
        [114.231286, 25.067031],
        [114.246453, 25.060443],
        [114.275394, 25.06074],
        [114.292095, 25.060111],
        [114.299073, 25.059175],
        [114.301188, 25.047043],
        [114.303304, 25.043931],
        [114.328054, 25.062253],
      ],
      three: [
        [114.375666, 25.090589],
        [114.374354, 25.079124],
        [114.395077, 25.067074],
        [114.4376, 25.053156],
        [114.453639, 25.056053],
        [114.464919, 25.058745],
        [114.473797, 25.063614],
        [114.481368, 25.060917],
        [114.48894, 25.06133],
        [114.505456, 25.071486],
        [114.527466, 25.077598],
        [114.532634, 25.084852],
        [114.5148, 25.101433],
        [114.50255, 25.127101],
        [114.477253, 25.144372],
        [114.467921, 25.143772],
        [114.463396, 25.146279],
        [114.466923, 25.156309],
        [114.44102, 25.162694],
        [114.430411, 25.163655],
        [114.422583, 25.158741],
        [114.412763, 25.160722],
        [114.408573, 25.170278],
        [114.405449, 25.177074],
        [114.399577, 25.177036],
        [114.395731, 25.16515],
        [114.396654, 25.138269],
        [114.38865, 25.098945],
      ],
      four: [
        [114.686391, 25.133723],
        [114.681665, 25.144407],
        [114.658486, 25.15711],
        [114.656982, 25.171938],
        [114.676487, 25.184633],
        [114.677452, 25.199191],
        [114.650971, 25.212305],
        [114.636164, 25.213616],
        [114.613974, 25.207704],
        [114.593156, 25.19325],
        [114.571778, 25.170549],
        [114.557695, 25.172472],
        [114.545844, 25.168025],
        [114.533114, 25.147748],
        [114.534605, 25.135627],
        [114.552318, 25.117287],
        [114.583593, 25.106096],
        [114.592463, 25.099723],
        [114.593093, 25.095836],
        [114.597787, 25.092416],
        [114.630891, 25.091172],
        [114.635906, 25.101743],
        [114.63783, 25.113557],
        [114.640595, 25.114645],
        [114.650217, 25.110215],
        [114.662586, 25.11107],
        [114.684079, 25.12024],
      ],
      five: [
        [114.612644, 25.304009],
        [114.601805, 25.324842],
        [114.585473, 25.32395],
        [114.555408, 25.349123],
        [114.533044, 25.342995],
        [114.513622, 25.344895],
        [114.487137, 25.3342],
        [114.477132, 25.313573],
        [114.446871, 25.305047],
        [114.436522, 25.282242],
        [114.421518, 25.278905],
        [114.403767, 25.250728],
        [114.410401, 25.246478],
        [114.419782, 25.24968],
        [114.425498, 25.23559],
        [114.417704, 25.210509],
        [114.422998, 25.204763],
        [114.452425, 25.215557],
        [114.468118, 25.212684],
        [114.495729, 25.214703],
        [114.52334, 25.204297],
        [114.538076, 25.209422],
        [114.551439, 25.233182],
        [114.585401, 25.273704],
        [114.601009, 25.269746],
        [114.61387, 25.276964],
      ],
    };
  },

  mounted() {
    console.log(this.$route.meta);
    this.initCurrent();
    this.initTrend();
    this.$nextTick(() => {
      setTimeout(() => {
        this.point();
        this.drawBounds();
        this.area(this.one, "#55D959");
        this.area(this.two, "#55D959");
        this.area(this.three, "#C2A439");
        this.area(this.four, "#55D959");
        this.area(this.five, "#700E0E");
      }, 1500);
    });
  },

  methods: {
    //点击空气趋势下拉框出发事件
    selectedTrend() {
      this.TrendChart.clear(); //让图表重新加载必须要用该图表的图表对象调用clear()方法，然后重新加载一次options数据
      this.TrendChart.setOption(this.TrendOption, true);
    },
    //初始化空气质量变化趋势图表
    initTrend() {
      this.TrendChart = this.$echarts.init(
        document.getElementById("trendContent")
      );

      this.TrendChart.setOption(this.TrendOption);
    },
    //当前空气质量
    initCurrent() {
      const myChart = this.$echarts.init(
        document.getElementById("currentContent")
      );
      let option = {
        series: [
          {
            type: "gauge",
            radius: "100%",
            center: ["50%", "55%"],
            progress: {
              width: 20,
              show: true,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#35FF85", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FF6118", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            pointer: {
              width: "5",
              offsetCenter: ["0", 10],
            },
            axisLine: {
              lineStyle: {
                width: 20,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 6,

              lineStyle: {
                width: 3,
                color: "#1890FF",
              },
            },
            splitNumber: 8,
            axisLabel: {
              distance: 25,
              color: "#999",
              fontSize: 14,
              formatter: function (value) {
                if (value === 75) {
                  return "优";
                } else if (value === 62.5) {
                  return "中";
                } else if (value === 37.5) {
                  return "良";
                } else if (value === 25) {
                  return "差";
                }
              },
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 15,
              itemStyle: {
                borderWidth: 3,
                color: "white",
                borderColor: "#1890FF",
              },
            },
            title: {
              show: true,
              fontSize: 14,
              offsetCenter: [0, "45%"],
            },
            itemStyle: {
              borderCap: "square",
            },
            detail: {
              valueAnimation: true,
              fontSize: 20,
              offsetCenter: [0, "70%"],
            },
            data: [
              {
                value: 50,
                name: "质量指数",
                itemStyle: {
                  color: "#1890FF",
                },
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
    //点击当前空气质量下拉框触发事件
    selectedChange() {
      this.tableLoading = true;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableLoading = false;
      }, 800);
    },
    //当页码改变时重新请求数据
    handleCurrentChange() {
      this.tableLoading = true;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableLoading = false;
      }, 800);
    },
    // 画行政区
    drawBounds() {
      let that = this;
      //加载行政区划插件
      if (!that.district) {
        //实例化DistrictSearch
        let opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "city", //查询行政级别为 市
        };
        that.district = new AMap.DistrictSearch(opts);
      }
      //行政区查询
      that.district.search("南雄市", (status, result) => {
        that.polygons = [];
        let bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            let polygon = new AMap.Polygon({
              path: bounds[i],
            });
            that.polygons.push(polygon);
          }
        }
        AMap.Polygon.bind(that.polygons);
        // that.$refs.map.$amap.setFitView(that.polygons); //视口自适应
      });
    },
    area(path, fillColor) {
      const map = amapManager.getMap();
      var polygon = new AMap.Polygon({
        // 这些就是图形的一些基本样式了，颜色 线条粗细 透明度之类的
        path,
        strokeColor: "#FFFFFF",
        strokeWeight: 2,
        strokeOpacity: 1,
        fillOpacity: 0.5,
        fillColor,
        zIndex: 50,
      });
      map.add(polygon);
      // 缩放地图到合适的视野级别
      // map.setFitView([polygon]);
    },
    point() {
      let markers = [];
      let windows = [];
      let that = this;
      let pointMarker = [
        {
          jw: [114.098741, 25.243776],
          type: 0, //0 优 1良 2差
        },
        {
          jw: [114.312367, 25.103962],
          type: 0, //0 优 1良 2差
        },
        {
          jw: [114.440066, 25.081879],
          type: 1, //0 优 1良 2差
        },
        {
          jw: [114.659346, 25.134169],
          type: 0, //0 优 1良 2差
        },
        {
          jw: [114.551159, 25.328544],
          type: 2, //0 优 1良 2差
        },
      ];
      pointMarker.forEach((item, index) => {
        markers.push({
          jw: item.jw,
          type: item.type,
          events: {
            mouseover() {
              that.windows.forEach((window) => {
                window.visible = false; //关闭窗体
              });
              that.window = that.windows[index];
              console.log(that.window);
              that.$nextTick(() => {
                that.window.visible = true; //点击点坐标，出现信息窗体
              });
            },
          },
        });
        windows.push({
          jw: item.jw,
          type: item.type,
          offset: [20, -30],
          visible: false, //初始是否显示
        });
      });
      //  加点
      this.dian = markers;
      //加弹窗
      this.windows = windows;
    },
  },
};
</script>

<style lang="less" scoped>
.sy-widow {
  padding: 0 16px;
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #cef3ff;
  border-radius: 4px;
  font-size: 16px;
}
.dt {
  width: 1200px;
  height: 560px;
}
.sjfx {
  width: 100%;
  height: auto !important;
  background-color: #fafafa;
}
.sy-widow {
  padding: 0 16px;
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #cef3ff;
  border-radius: 4px;
  font-size: 16px;
}
.dt {
  width: 1200px;
  height: 560px;
}
//页面标题
.pageTitle {
  width: 1200px;
  margin: 20px auto;
  height: 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  p:nth-child(1) {
    height: 100%;
    font-size: 32px;
    font-family: PangMenZhengDao;
    color: #333333;
    line-height: 50px;
  }
  p:nth-child(2) {
    min-width: 280px;
    height: 50px;
    border-radius: 4px;
    border: 1px solid rgba(51, 51, 51, 0.2);
    text-align: center;
    line-height: 50px;
    img {
      width: 21px;
      height: 26.5px;
      vertical-align: middle;
      margin: 0 10px;
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}

//头部卫星图展示

.selectActive {
  color: rgba(255, 255, 255, 1) !important;
  background: url("../../../assets/sthj/img/xxk.png");
}
.header {
  width: 1920px;
  height: 552px;
  display: flex;
  justify-content: center;
  img {
    height: 100%;
  }
  .wxt {
    width: 1200px;
    height: 100%;
    margin: 0 11px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .bzd {
      position: absolute;
      width: 150px;
      height: 10px;
      top: -10px;
      left: 20px;
    }
    .situationList {
      width: 140px;
      height: 300px;
      background: #000000;
      opacity: 0.6;
      position: absolute;
      top: 0px;
      left: 20px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      p:nth-child(1) {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff !important;
      }
      p {
        margin: 12px 20px;
        color: white;
        display: flex;
        align-items: center;
        opacity: 1;
        span {
          display: inline-block;
          width: 24px;
          height: 12px;

          border-radius: 2px;
          margin-right: 12px;
        }
        img {
          vertical-align: middle;
          width: 12px;
          height: 18px;
          margin: 0 16px 0px 8px;
        }
      }
    }
  }
}

//echarts空气质量图表展示
.airQuality {
  width: 1200px;
  height: 400px;
  background: #ffffff;
  transform: translateX(10px);
  margin: 0 auto;
  display: flex;
}
.airQuality > div {
  height: 100%;
  padding: 20px;
  .title {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid #e9e9e9 !important;
    padding: 0px 24px;
  }
  .content {
    width: 100%;
    height: 305px;
  }
}

//aqi预报
.forecast {
  width: 1200px;
  height: 380px;
  margin: 24px auto;
  padding: 20px;
  background: #ffffff;
  .forecast-title {
    width: 100%;
    height: 55px;
    line-height: 55px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 2px solid #e9e9e9;
  }
  .forecast-content {
    width: 100%;
    height: calc(400px - 55px);
    padding: 30px 60px;
    display: flex;
    justify-content: space-between;

    .forecast-content-item {
      width: 180px;
      height: 220px;
      position: relative;
      .forecast-box {
        width: 100%;
        height: 150px;

        box-shadow: 4px 4px 0px 0px #dddddd;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        p:nth-child(1) {
          font-size: 36px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #ffffff;
        }
        p:nth-child(2) {
          width: 66px;
          height: 38px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 4px;

          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 38px;
          text-align: center;
        }
      }
      .Sharp {
        width: 20px;
        height: 20px;
        margin: -10px auto;

        border-radius: 2px;
        background: #39c50b;
        transform: rotate(45deg);
        box-shadow: 4px 4px 0px 0px #dddddd;
      }
      .forecast-date {
        width: 100%;
        margin-top: 32px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: bolder;
        color: #333333;
        text-align: center;
      }
    }
  }
}

//实时水质量表格
.realQuality {
  width: 1200px;
  height: auto;
  margin: 0 auto;
  background: #ffffff;
  transform: translateX(10px);
  padding: 30px;
  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px !important;
    p {
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    div {
      width: 200px;
    }
  }
  .content {
    width: 100%;
    height: auto;
  }
  /deep/.el-table__body {
    width: 100% !important;
  }
  /deep/.el-table__header {
    width: 100% !important;
  }
  /deep/.el-table th,
  .el-table tr {
    background-color: #eeeeee !important;
    text-align: center;
  }
  /deep/.el-table--enable-row-transition .el-table__body td {
    text-align: center;
  }
  .pageination {
    width: 100%;
    margin-top: 63px;
    display: flex;
    justify-content: center;
  }
  .levelblock {
    width: 24px;
    height: 8px;
    display: inline-block;
    margin-left: 7px;

    border-radius: 2px;
  }
}
</style>